<template>
  <div class="dashboard-container">
    <adminDashboard></adminDashboard>
    <div class="zou-ma">
        <el-carousel>
            <el-carousel-item v-for="(item,index) in banner" :key="index">
              <div>
                <img :src="item" >
              </div>
            </el-carousel-item>
          </el-carousel>
    </div>
    <div class="tz">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <div style="">
          <el-button style="font-size: 12px;cursor: pointer;" class="hover_o" @click="see_more_notice()">查看更多</el-button>
        </div>
        <el-table :data="notice" style="width: 100%;border: 1px solid #CCCCCC;">
          <el-table-column label="通知公告" prop="title" >
          </el-table-column>
          <el-table-column label="时间" prop="add_time"  align="center">
          </el-table-column>
          <el-table-column label="操作" prop="add_time"  align="center">
              <template slot-scope="row">
                <el-button type="success" size="mini" @click="details(row)" icon="el-icon-document" ></el-button>
              </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <div style="display: flex;">
             <el-button style="font-size: 12px;cursor: pointer;" class="hover_o"  @click="see_more()">查看更多</el-button>
             <el-button style="font-size: 12px;cursor: pointer;" type="primary" class="hover_o"  @click="diary_jia_f()"> + 添加日记 </el-button>
        </div>
        <el-table :data="diary" style="width: 100%;border: 1px solid #CCCCCC;">
          <el-table-column label="工作日记" prop="title">
          </el-table-column>
          <el-table-column label="时间" prop="add_time"  align="center">
          </el-table-column>
          <el-table-column label="操作"  align="center">
            <template slot-scope="row">
              <el-button type="success" size="mini" @click="details(row)" icon="el-icon-document" ></el-button>
              <el-button type="info" v-if="row.row.is_top==0" icon="el-icon-top"  size="mini" @click="topping(row)"></el-button>
              <el-button type="primary" v-else size="mini" icon="el-icon-bottom" @click="notop(row)"></el-button>
              <el-button type="danger" size="mini" @click="shan(row)" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 添加-->
        <el-dialog
          title="添加"
          :visible.sync="tian_j"
          width="30%"
          center
          >
          <div>
            <el-form label-width="80px" style="text-align: left;">
              <el-form-item label="标题:">
                <el-input v-model="jia_title" placeholder="请添加标题"></el-input>
              </el-form-item>
              <el-form-item label="内容:">
                <el-input v-model="jia_content" placeholder="请添加内容"></el-input>
              </el-form-item>
               <el-form-item label="是否置顶:">
                 <!-- <el-checkbox v-model="checked" >置顶</el-checkbox> -->
                 <el-switch v-model="checked"></el-switch>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="tian_j = false">取 消</el-button>
            <el-button type="primary" @click="diary_ok()">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 详情 -->
        <el-dialog
          title="详情"
          :visible.sync="dialogVisible"
          width="30%"
          center
          >
          <div>
            <el-form ref="diary_details" :model="diary_details" label-width="80px" style="text-align: left;">
              <el-form-item label="标题:">
                <div>{{diary_details.title}}</div>
              </el-form-item>
              <el-form-item label="内容:">
                {{diary_details.content}}
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </el-col>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import { dashboard,diary_list,diary_del,diary_add,diary_top,notice_del,notice_top} from '@/api/dashboard.js'
// import editorDashboard from './editor'
export default {
  name: 'Dashboard',
  components: {
    adminDashboard
    },
  data() {
    return {
      checked: false,
      jia_title:"",
      jia_content:"",
      currentRole: 'adminDashboard',
      dialogVisible: false,
      tian_j:false,
      diary_details:[],
      list:[
        {title:"通知公告标题通知通知公告标题通知通知公告标题通知",time:"18:00"},
        {title:"通知公告标题通知通知公告标题通知通知公告标题通知",time:"18:00"}
      ],
      banner:[],
      notice:[],
      diary:[]
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    this.reqery()
  },
  methods:{
    reqery(){
      dashboard().then(res=> {
        this.banner=res.data.banner_list
        this.notice=res.data.notice_list.list
        // this.list = response.data.items.slice(0, 8)
      }),
      diary_list().then(res=>{
        this.diary=res.data
      })
    },
    shan(val){
      console.log(val.row.id,"aaa")
      diary_del(val.row.id).then(res=>{
        alert(res.msg)
        if(res.code==200){
          diary_list().then(res=>{
            this.diary=res.data
          })
        }
      })
    },
    delete_button(val){
      console.log(val.row.id,"aaa")
      notice_del(val.row.id).then(res=>{
        alert(res.msg)
        if(res.code==200){
          this.reqery()
        }
      })
    },
    details(val){
      console.log(val.row)
      this.diary_details=val.row

      this.dialogVisible = true

    },
    diary_jia_f(){
      this.tian_j=true
    },
    diary_ok(){
      let that = this

      if(that.checked==true){
        that.checked=1
      }else{
        that.checked=0
      }

      diary_add(that.jia_title,that.jia_content,that.checked).then(res=>{
        console.log(res)
        alert(res.msg)
        if(res.code==200){
          that.tian_j=false
          diary_list().then(res=>{
            this.diary=res.data
          })
        }
      })
    },
    topping(val){
      let that = this
      diary_top(val.row.id,1).then(res=>{
        console.log(res)
        if(res.code==200){
          diary_list().then(res=>{
            this.diary=res.data
          })
        }
      })
    },
    notop(val){
      let that = this
      diary_top(val.row.id,0).then(res=>{
        console.log(res)
        if(res.code==200){
          diary_list().then(res=>{
            this.diary=res.data
          })
        }
      })
    },

    see_more(){
      let that = this
      that.$router.push({
        path:"/setup/setup_diary"
      })
    },
    see_more_notice(){
      let that = this
      that.$router.push({
        path:"/setup/setup_notice_noauth"
      })
    }
  }
}
</script>
<style type="text/css">
  .el-dialog__body{
    padding: 0px 20px;
  }
</style>
<style scoped="scoped">
  .tz_s{
    color: #949494;
  }
  .hover_1:hover{
    color: rgb(64, 158, 255) !important;
    cursor: pointer;
  }
  .tz_title>div:nth-child(1){
font-weight: 600;
  }
  .tz_nav{
display: flex;
justify-content: space-between;
border: 1px solid #d9d9d9;
padding: 10px 15px;
  }
  .tz_title{
border: 1px solid #d9d9d9;
display: flex;
justify-content: space-between;
padding: 15px 15px;
  }
  .tz>div{
    width: 49.4%;
  }
  .tz{
       display: flex;
      justify-content: space-between;
      padding: 0px 25px 0px 25px;
  }
  .zou-ma{
    height: 268px;
    width: 1647px;
    margin:20px auto;
  }
  .nav_x{
    margin-top: 15px;
    background-color: #FFFFFF;
  }
  .nav_l{
    background-color: #e8e8e8;
    overflow: auto;
  }
  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .nav_zhen {
    width: 560px;
    height: 120px;
    border: 1px solid #ccc;
    background-color: #FFFFFF;
    margin-top: 15px;
    text-align: center;
    line-height: 105px;
  }
  .el-button--mini {
      padding: 4px 15px;
      font-size: 12px;
      border-radius: 3px;
  }
</style>
